<template>
  <div class="goods-box">
    <div class="goods-list-box">
      <div class="goods-list">
        <div
          class="goods-show-info"
          v-for="(item, index) in allgoodlist"
          :key="index"
        >
          <p class="goods-show-img">
            <!-- <router-link :to="'/bookInfo/' + item.id"> -->
            <img :src="item.imgurl" @click="toBookInfo(index)" />
            <!-- </router-link> -->
          </p>
          <div>
            <span class="seckill-bookname">{{ item.name }}</span>
          </div>
          <div class="goods-show-price">
            <span>
              <span class="seckill-author"
                >最大购买量:{{
                  item.pnum - $store.getters.getGoodsCartNumber(item.id)
                }}</span
              >
            </span>
          </div>
          <div class="goods-show-price">
            <el-button size="small" type="text" @click="addGoodsCart(index,item)"
              >加入购物车</el-button
            >
          </div>
          <div class="goods-show-seller">
            <span>￥{{ item.price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import myapi from "../api";
export default {
  name: "BooksList",
  data() {
    return {
      allgoodlist: [],
    };
  },
  watch: {
    $route() {
      this.getBooks();
    },
  },
  methods: {
    addGoodsCart(index,book) {
      this.$store.dispatch("addGoods", this.allgoodlist[index]); //该方法能被浏览器的f12捕      
      this.allgoodlist.splice(index,1,book);
    },
    getBooks() {
      axios
        .post(myapi.books.url, { category: this.$route.params.category })
        .then((response) => {
          let res = response.data;
          if (res.code == 10) {
            this.allgoodlist = res.data;
          } else {
            console.log("获取失败");
          }
        });
    },
    toBookInfo(index) {
      this.$store.state.book = this.allgoodlist[index];
      this.$router.push("/bookDetails");
    },
  },
  mounted() {
    this.getBooks();
  },
};
</script>

<style scoped>
.seckill-bookname {
  font-size: 20px;
  color: black;
}
.seckill-author {
  font-size: 10px;
  color: gray;
}

.goods-show-seller span:nth-child(1) {
  font-size: 20px;
  color: #e4393c;
}
.goods-show-seller span:nth-child(2) {
  font-size: 10px;
  color: gray;
  text-decoration: line-through;
}
.goods-box {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
  display: flex;
}

/* ---------------商品栏开始------------------- */
.goods-list-box {
  margin-left: 15px;
  width: calc(100% - 215px);
}
.goods-list-tool {
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.goods-list-tool ul {
  padding-left: 15px;
  list-style: none;
}
.goods-list-tool li {
  cursor: pointer;
  float: left;
}
.goods-list-tool span {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 36px;
  background-color: #fff;
}
.goods-list-tool span:hover {
  border: 1px solid #e4393c;
}
.goods-list-tool i:hover {
  color: #e4393c;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: #e4393c !important;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-show-info {
  width: 240px;
  padding: 10px;
  margin: 15px 0px;
  border: 1px solid #fff;
  cursor: pointer;
}
.goods-show-info div {
  margin-left: 10px;
  margin-top: 5px;
}
/* 实现鼠标悬挂时显示边框和阴影 */
.goods-show-info:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span {
  color: #005aa0;
  font-weight: bold;
}

.goods-page {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.goods-show-img {
  width: 220px;
  height: 220px;
}
.goods-show-img img {
  width: 100%;
  height: 100%;
}
/* ---------------商品栏结束------------------- */
</style>